<template>
    <div>
        <div class="search">
            <el-input v-model="search_uid" placeholder="会员UID"></el-input>
            <el-input v-model="search_uname" placeholder="会员昵称"></el-input>
            <el-input v-model="search_tel" placeholder="会员手机号"></el-input>
            <el-select v-model="value" clearable placeholder="-请选择是否代理-">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
                <el-date-picker
                      v-model="searchTime"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd">
                </el-date-picker>
            <button class="sousuo"><i class="el-icon-search"></i></button>
        </div>
        <div class="table_gong">
            <div>共有数据<span>{{ count }}</span>条</div>
        </div>
        <el-table v-loading="loading" :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="userInfo" label="用户信息">
                <template v-slot="scope">
                    <div class="user_head_url">
                        <img :src="scope.row.head_url">
                    </div>
                    <div class="user_username">{{scope.row.nickname}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="stored_money" label="余额">
                <template v-slot="scope">
                  {{ format_money(scope.row.stored_money) }}
                </template>
            </el-table-column>
            <el-table-column prop="hunjing" label="魂晶">
              <template v-slot="scope">
                {{format_hunjing(scope.row.hunjing)}}
              </template>
            </el-table-column>
            <el-table-column prop="score" label="赏币">
            </el-table-column>
            <el-table-column prop="shangdai_shangpin_jiazhi" label="赏袋赏品价值">
            </el-table-column>
            <el-table-column prop="inviter_name" label="邀请人">
                <template v-slot="scope">
                    <img src=""> <span class="uid">1002</span><span class="ivtName">{{ scope.row.inviter_name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="vip" label="会员等级">
            </el-table-column>
            <el-table-column prop="telephone" label="手机号">
            </el-table-column>

            <el-table-column prop="is_daili" label="是否代理">
                <template v-slot="scope">
                    <el-button v-if="scope.row.is_daili == true" size="mini" type="success" round>是</el-button>
                    <el-button v-else size="mini" type="danger" round>否</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="is_real" label="是否实名">
                <template v-slot="scope">
                    <el-button v-if="scope.row.is_real == true" size="mini" type="success" round>已实名</el-button>
                    <el-button v-else size="mini" type="danger" round>未实名</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="zhuangTai" label="状态">
                <template v-slot="scope">
                    <el-button v-if="scope.row.state == 0" size="mini" round type="primary">正常</el-button>
                    <el-button v-else size="mini" round type="danger">已禁用</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="注册时间" width="100px">
            </el-table-column>
            <el-table-column prop="address" label="操作" width="180px">
                <template v-slot="scope">
                    <a class="ban" v-if="scope.row.state == 0" @click="ban(scope.row.uuid,true)">禁用</a>
                    <a class="ban" v-else @click="ban(scope.row.uuid,false)">解除禁用</a>
                    <a class="daiLiUp" v-if="scope.row.is_daili == false" @click="daili(scope.row.uuid,true)">代理升级</a>
                    <a class="daiLiUp" v-else @click="daili(scope.row.uuid,false)">取消代理</a>
                    <a class="shiMing"  @click="realVisible = true">实名</a>
                            <el-dialog
                            title="提示"
                            :visible.sync="realVisible"
                            width="30%"
                           >
                            <el-form label-width="80px" :rules="rules" ref="ruleForm" :model="realNameForm">
                                <el-form-item label="姓名">
                                    <el-input v-model="realNameForm.name"></el-input>
                                </el-form-item>
                                <el-form-item prop="idCard" label="身份证号">
                                    <el-input v-model="realNameForm.idcard"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="realVisible = false">取 消</el-button>
                                <el-button type="primary" @click="realName(scope.row.uuid,'ruleForm')">确 定</el-button>
                            </span>
                            </el-dialog>
                    <a class="xiangQing" @click="godetail(scope.row.uuid)">详情</a>
                </template>
                </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
            :page-sizes="[8, 10, 15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="count">
        </el-pagination>
    </div>
</template>

<script>
import user from '../../../api/jurisdiction'
import {format_money, format_hunjing} from "@/utils/format";
export default {
    data() {
        return {
            searchTime: '',
            loading: true,
            realVisible: false,
            realNameForm: {},
            rules: {
                idCard: [
                    // { required: true, message: '请输入正确的身份证号', trigger: 'blur' },
                    // { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' }
                ],
            },
            // 搜索
            search_uid: '',
            search_uname: '',
            search_tel: '',
            // 是否代理
            value: '',
            options: [{
                value: '选项1',
                label: '否'
            },
            {
                value: '选项2',
                label: '是'
            },
            ],
            // 分页
            pagenum: 1,
            pagesize: 8,
            count: 0,
            // 数据数组
            tableData: []
        }
    },
    created() {
        this.getUserList()
    },
    methods: {
      format_money,
      format_hunjing,
        getUserList() {
            user.userList({ params: { page: this.pagenum, page_size: this.pagesize } }).then((res) => {
                this.loading = false;
                this.tableData = res.data.list
                this.count = res.data.sum_count
            }).catch(err => {
                if (err.data.code === -10002) {
                    this.$message.warning("登录已过期")
                    this.$router.push("/login")
                }
                console.log(err)
            })
        },
        godetail(id) {
            this.$router.push({
                name: 'persondetail',
                params:{id}
            })
        },
        ban(id,ban) {
                this.$confirm('是否禁用该用户？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                 user.jinyong({
                    user_uuid: id,
                    disable: ban
                 }).then((res) => {
                     console.log('禁用', res)
                     if (ban == true) {
                         this.$message({
                             type: 'success',
                             message: '该用户已被禁用!'
                            });
                     } else {
                          this.$message({
                            type: 'success',
                            message: '已解除禁用!'
                        });
                     }
                this.getUserList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        daili(id,daili) {
                this.$confirm('是否升级为代理?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
               user.daili({
                    user_uuid: id,
                    daili
                }).then((res) => {
                    console.log('代理', res)
                    this.$message({
                        type: 'success',
                        message: '已升级为代理'
                    });
                })
             this.getUserList()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        realName(id,formName) {
             this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('是否实名?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        user.shiming({
                            user_uuid: id,
                            real_name: this.realNameForm.name,
                            idcard_num: this.realNameForm.idcard - 0
                        }).then((res) => {
                            console.log('实名', res)
                            this.$message({
                                type: 'success',
                                message: '已实名'
                            });
                        })
                        this.realVisible = false
                        this.getUserList()
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
           
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pagesize = val
            this.getUserList()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagenum = val
            this.getUserList()
        }
    },
}
</script>

<style lang="less" scoped>
.el-table {
    font-size: 13px;
    margin-bottom: 20px;
    text-align: center !important;
}

a {
    display: inline-block;
    margin: 2px 6px;
    font-size: 12px;
    color: white;
    padding: 0px 3px;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
}

.el-input {
    width: 130px;
    margin-right: 20px;
}

.el-select {
    margin-right: 20px;
}

.ban {
    background-color: #ff5722;
}

.daiLiUp {
    background: #009688;
}

.shiMing {
    background: #009688;
}

.xiangQing {
    background: #1e9fff;
}

.search {
    width: 100%;
}

.sousuo {
    margin: 6px;
    width: 50px;
    height: 40px;
    background: #009688;
    border: 0;
    color: white;
    font-size: 20px;
    vertical-align: middle;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    cursor: pointer;
}

.table_gong {
    width: 100%;
    height: 20px;
}

.table_gong div {
    float: right;
    font-size: 14px;
}

.user_head_url {
    // float: left;
    width: 60%;
}

.user_head_url img {
    width: 100%;
}
a{
    cursor: pointer;
}
.el-pagination {
    text-align: center;
    margin-top: 10px;
}
</style>